﻿@page "/tests/buttons"
<Row>
    <Column>
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Default Buttons</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Use the color enums like <code>Color.Primary</code></CardText>
            </CardBody>
            <CardBody>
                <Button Color="Color.Primary">Primary</Button>
                <Button Color="Color.Secondary">Secondary</Button>
                <Button Color="Color.Success">Success</Button>
                <Button Color="Color.Danger">Danger</Button>
                <Button Color="Color.Warning">Warning</Button>
                <Button Color="Color.Info">Info</Button>
                <Button Color="Color.Light">Light</Button>
                <Button Color="Color.Dark">Dark</Button>
                <Button Color="Color.Link">Link</Button>
                <Button>Default</Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Outline Buttons</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the <code>Outline</code> ones to remove all background images and colors on any button.</CardText>
            </CardBody>
            <CardBody>
                <Button Color="Color.Primary" Outline>Primary</Button>
                <Button Color="Color.Secondary" Outline>Secondary</Button>
                <Button Color="Color.Success" Outline>Success</Button>
                <Button Color="Color.Danger" Outline>Danger</Button>
                <Button Color="Color.Warning" Outline>Warning</Button>
                <Button Color="Color.Info" Outline>Info</Button>
                <Button Color="Color.Light" Outline>Light</Button>
                <Button Color="Color.Dark" Outline>Dark</Button>
                <Button Color="Color.Link" Outline>Link</Button>
                <Button Outline>Default</Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Sizes</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Add Button Size <Code>.ExtraSmall</Code>, <Code>.Small</Code>, <Code>.Medium</Code>, <Code>.Large</Code>, <Code>.ExtraLarge</Code> for additional sizes.</CardText>
            </CardBody>
            <CardBody>
                <Button Color="Color.Primary" Size="Size.ExtraSmall">Extra small</Button>
                <Button Color="Color.Secondary" Size="Size.Small">Small</Button>
                <Button Color="Color.Info" Size="Size.Default">Default</Button>
                <Button Color="Color.Success" Size="Size.Medium">Medium</Button>
                <Button Color="Color.Warning" Size="Size.Large">Large</Button>
                <Button Color="Color.Danger" Size="Size.ExtraLarge">Extra large</Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Block</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Create block level buttons by adding <code>Block</code></CardText>
            </CardBody>
            <CardBody>
                <Button Color="Color.Primary" Block>Primary block button</Button>
                <Button Color="Color.Secondary" Block>Secondary block button</Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.Is12.OnMobile.IsHalf.OnTablet">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Active</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Add the <code>Active</code> attribute to buttons.</CardText>
            </CardBody>
            <CardBody>
                <Button Color="Color.Primary" Active>Primary</Button>
                <Button Color="Color.Link" Active>Link</Button>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.Is12.OnMobile.IsHalf.OnTablet">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Disabled</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Add the <code>Disabled</code> attribute to buttons.</CardText>
            </CardBody>
            <CardBody>
                <Button Color="Color.Primary" Disabled>Primary</Button>
                <Button Color="Color.Secondary" Disabled>Secondary</Button>
                <Button Color="Color.Success" Disabled>Success</Button>
                <Button Color="Color.Danger" Disabled>Danger</Button>
                <Button Color="Color.Warning" Disabled>Warning</Button>
                <Button Color="Color.Info" Disabled>Info</Button>
                <Button Color="Color.Light" Disabled>Light</Button>
                <Button Color="Color.Dark" Disabled>Dark</Button>
                <Button Color="Color.Link" Disabled>Link</Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.IsFull">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Loading</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Use <code>Loading</code> attribute to add spinners within buttons to indicate an action is currently processing or taking place. Use <code>@("<LoadingTemplate>")</code> to add a custom loading template</CardText>
            </CardBody>
            <CardBody>
                <Button Color="Color.Primary" Loading>Primary</Button>
                <Button Color="Color.Secondary" Loading>Secondary</Button>
                <Button Color="Color.Success" Loading>Success</Button>
                <Button Color="Color.Danger" Loading>Danger</Button>
                <Button Color="Color.Warning" Loading>Warning</Button>
                <Button Color="Color.Info" Loading>Info</Button>
                <Button Color="Color.Light" Loading>Light</Button>
                <Button Color="Color.Dark" Loading>Dark</Button>
                <Button Color="Color.Link" Loading>Link</Button>
                <Button Color="Color.Primary" Clicked="ShowLoading" Loading="@isLoading">
                    <LoadingTemplate>
                        This is a custom loading template
                    </LoadingTemplate>
                    <ChildContent>
                        Click to load
                    </ChildContent>
                </Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.Is12.OnMobile.IsHalf.OnTablet">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Button Addons</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Wrap a series of buttons with <code>Buttons</code> component.</CardText>
            </CardBody>
            <CardBody>
                <Buttons>
                    <Button Color="Color.Secondary">Profile</Button>
                    <Button Color="Color.Secondary">Settings</Button>
                    <Button Color="Color.Secondary">Messages</Button>
                </Buttons>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.Is12.OnMobile.IsHalf.OnTablet">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Button group</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>You can also combine dropdown and buttons inside of a button group.</CardText>
            </CardBody>
            <CardBody>
                <Buttons>
                    <Button Color="Color.Secondary">Action</Button>
                    <Button Color="Color.Secondary">Settings</Button>
                    <Dropdown>
                        <DropdownToggle Color="Color.Secondary">Dropdown</DropdownToggle>
                        <DropdownMenu>
                            <DropdownItem>Item 1</DropdownItem>
                            <DropdownItem>Item 2</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                </Buttons>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Buttons toolbar</CardTitle>
            </CardHeader>
            <CardBody>
                <Buttons Role="ButtonsRole.Toolbar">
                    <Buttons Margin="Margin.Is2.FromEnd">
                        <Button Color="Color.Primary">Primary</Button>
                        <Button Color="Color.Secondary">Secondary</Button>
                        <Button Color="Color.Info">Info</Button>
                    </Buttons>
                    <Buttons>
                        <Button Color="Color.Danger">Danger</Button>
                        <Button Color="Color.Warning">Warning</Button>
                    </Buttons>
                    <Buttons Margin="Margin.Is2.OnX">
                        <Button Color="Color.Light">Light</Button>
                    </Buttons>
                </Buttons>
            </CardBody>
        </Card>
    </Column>
</Row>
@code {
    private bool isLoading;

    private async Task ShowLoading()
    {
        isLoading = true;

        await Task.Delay( TimeSpan.FromSeconds( 3 ) );

        isLoading = false;
    }
}